import '../styles/TaskInfoCard.css'
import React, { useState } from 'react';
import TimeRecordPopup from './TimeRecordPopup';
const TaskInfoCard = () => {
    const [visible, setVisible] = useState(false);

  return (
    <div className="task-info-card">
      <h3 className="section-title">任务信息</h3>
      
      {/* 报告人 */}
      <div className="info-row">
        <span className="label">报告人</span>
        <div className="user-info">
          <img 
            src="/tou1.png" 
            alt="" 
            className="avatar"
          />
          <span className="name">小张</span>
        </div>
      </div>

      {/* 执行人 */}
      <div className="info-row">
        <span className="label">执行人</span>
        <div className="user-info">
          <img 
            src="/tou1.png" 
            alt="" 
            className="avatar"
          />
          <span className="name">段欣悦</span>
        </div>
      </div>

      {/* 优先级和截止日期 */}
      <div className="info-row flex-between">
        <div className="info-col">
          <span className="label">优先等级</span>
          <div className="priority-tag">
            <span className="priority-arrow">↑</span>
            <span>中</span>
          </div>
        </div>
        <div className="info-col">
          <span className="label">截止日期</span>
          <span className="date">2021-12-31</span>
        </div>
      </div>

      {/* 时间进度 */}
      <div className="time-progress">
        <div className="progress-circle">
        </div>
          <div className="progress-content">
            <div className="time-used">已用：1d 3h 25m</div>
            <div className="time-estimate">预计时间：3d 8h</div>
          </div>
        <div>
      <button onClick={() => setVisible(true)}>记录时间</button>
      <TimeRecordPopup 
      visible={visible} 
      onClose={() => setVisible(false)} 
    />
    </div>
      </div>

      {/* 创建时间 */}
      <div className="create-time">
        <i className="calendar-icon"></i>
        创建于 2020-09-12
      </div>
    </div>
  );
};

export default TaskInfoCard;